<html manifest="IGNORE.manifest" lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<!DOCTYPE html>
<html manifest="IGNORE.manifest" class="bangshouji" lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/reset.css" th:href="@{${uiPath} + ${appName} + '/css/reset.css'}"/>
    <link rel="stylesheet" type="text/css" href="../css/CLSRZ.css" th:href="@{${uiPath} + ${appName} + '/css/CLSRZ.css'}"/>
    <link rel="stylesheet" type="text/css" href="../css/zdialog.css"  th:href="@{${uiPath} + ${appName} + '/css/zdialog.css'}"/>

    <!-- <base id="baseUrl" href="${base}/"/> -->
</head>
<body>
<form  id="commentForm" th:action="@{'/materialShop/shopSave'}" method="post">

<!-- 添加商铺 -->
<div id="tiansp" class="azong tianjiaazong">
    <div class="gtoubu">
        <p class="shpingunli">添加商铺</p>
        <a href="javascript:history.go(-1);"><img class="fanhui" src="../images/raw_1503386635.png" alt="" th:src="@{${uiPath} + ${appName} + '/images/raw_1503386635.png'}"></a>
    </div>
    <div class="kuaiw"> </div>
    <div class="xgfenlei">
        <div class="xgleft">
            <p class="xgfirst"><b>第一步：选择城市</b></p>
            <div class="citysecl">
                <p class="danqianxuanz">当前选择：<span id="xuandfcity"></span>   </p>
            </div>

            <img class="dingwei dingweiyixa" src="../images/raw_1503289426.png" alt=""th:src="@{${uiPath} + ${appName} + '/images/raw_1503289426.png'}">
            <div class="citylistdian dingeicish">
                <select class="selecity" name="city" id="type">
                    <option  th:text="${configRegion.regionName}" th:value="${configRegion.regionNumber}"></option>

                    <option th:each="configList,conStat: ${configList}" th:utext="${configList.regionName}" th:value="${configList.regionNumber}"></option>
                </select>
            </div>

            <p class="xgfirst"><b>第二步：选择商场种类</b></p>
            <div class="xgdiyi">
                <p class="xgwos" th:each="materialListType,aStat: ${materialList}" th:utext="${materialListType.marketTypeName}" th:class="${aStat.index==0}?'xgwos ktws':'xgwos'" th:onclick="'typeClieck('+${materialListType.marketTypeId}+')'" th:id="${materialListType.marketTypeId}+'type'" th:data="${materialListType.marketTypeId}"></p>
            </div>
            <p  class="xgfirst"><b>第三步：选择商场</b></p>
            <div id="shangcheng">
            <div id="xgfrdd" class="xiugaidisan" th:each="materialTypeList,listTypeStat: ${materialList}" th:id="${materialTypeList.marketTypeId}+'list'" th:style="${listTypeStat.index==0}?'display:block':'display:none'" >
                <div th:each="materialList,userStat: ${materialTypeList.list}">
                    <p  th:id="${materialList.marketListId}+'listId'" th:utext="${materialList.marketListName}" th:class="${userStat.index==0}?'tj tj0':'tj'" th:onclick="'listClieck('+${materialList.marketListId}+')'" th:data="${materialList.marketListId}" ></p>
                 </div>
            </div>
            </div>
            <p class="xgfirst"><b>第四步：选择店铺区位</b></p>
            <div id="quwei">
            <div th:each="materialTypeALLList,typeStat: ${materialList}"  th:style="${typeStat.index==0}?'display:block':'display:none'"  th:id="${materialTypeALLList.marketTypeId+'typearea'}" class="areaxiugaidisan">
                    <div class="areastatus" th:each="materialAllList,allListStat:${materialTypeALLList.list}" th:style="${allListStat.index==0}?'display:block':'display:none'" th:id="${materialAllList.marketListId+'area'}">
                        <div th:each="materIalAreaKist,areaStat:${materialAllList.areaList}" th:if="${allListStat.size!=0}">
                            <p th:utext="${materIalAreaKist.marketAreaName}" th:id="${materIalAreaKist.marketAreaId}" th:class="${allListStat.index==0}?'xfour xfour0':'xfour'" th:onclick="'areaClieck(this)'" th:data="${materIalAreaKist.marketAreaId}"></p>
                        </div>
                </div>

            </div>
            </div>
            <p class="xgfirst"><b>第五步：填写资料</b></p>
        </div>
    </div>

    <div class="xqzil baindiaxaz">
        <ul class="xqwb bainjfid">
            <li class="xqzb">
                <p class="miaosup xiandidi">定位地址：</p>
                <input id="xiandadress" readonly="readonly" placeholder="点击选择地址" class="dianpumaiso" type="text" value="">
                <input id="marketTypeId" name="marketTypeId" type="hidden">
                <input id="marketListId" name="marketListId" type="hidden">
                <input id="marketAreaListId" name="marketAreaListId" type="hidden">
            </li>
            <li class="xqzb">
                <p class="miaosup xiandidi">商家名称：</p>
                <input id="sjmingzi" class="dianpumaiso klkl" name="shopName" type="text" value="" >
                <input id="longitude" class="dianpumaiso klkl" name="lng" type="hidden" value="" >
                <input id="dimension" class="dianpumaiso klkl" name="lat" type="hidden" value="" >

            </li>
            <li class="xqzb">
                <p class="miaosup xiandidi">详细地址：</p>
                <input id="xiandadress1" type="text"  name="shopAddress" class="dianpumaiso"  value="" >
            </li>

        </ul>
    </div>

    <div class="bcuocunxiugai">
        <p class="tianjiadle" th:onclick="'saveAdd()'">添加商铺</p>
    </div>
    <div class="mapalert">
        <input class="shurudizi" type="text" placeholder="请输入位置">
        <p class="shousuo">搜索</p>
        <div id="resultd"></div>

    </div>
</div>
    <input type="hidden" id="tobaiduCity" th:value="${configRegion.regionName}">
</form>
<script type="text/javascript" src="../js/flexible.js" th:src="@{${uiPath} + ${appName} + '/js/flexible.js'}"></script>
<script type="text/javascript" src="../js/jquery.min.js" th:src="@{${uiPath} + ${appName} + '/js/jquery.min.js'}"></script>
<!-- <script type="text/javascript" src="../js/basevalue.js"></script> -->
<script type="text/javascript" src="../js/zdialog.js" th:src="@{${uiPath} + ${appName} + '/js/zdialog.js'}"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=BCy4SdrGcsabvjyoQbOMcW3kIyoV6xFL"></script>
<script type="text/javascript" src="../js/CLSRZ.js" th:src="@{${uiPath} + ${appName} + '/js/CLSRZ.js'}"></script>

<script th:inline="javascript">
    function typeClieck(id){
        $('.xiugaidisan').css({display:'none'});
        $('.areaxiugaidisan').css({display:'none'});
        $('#'+id+'list').show();
        $('#'+id+'typearea').show();
        $('.ktws').removeClass('ktws');
        $('#'+id+'type').addClass('ktws');
        $('.tj0').removeClass('tj0');
        $('#'+id+'list').children('div').first().children('p').first().addClass('tj0');
        var a=  $('#'+id+'typearea').children('div').first().attr("id");
        $('.areastatus').css({display:'none'});
        $('#'+a).css({display:'block'});
        $('.xfour0').removeClass('xfour0');
        $('#'+a).children('div').first().children('p').first().addClass('xfour0');
    }
    function listClieck(id){
        $('.areastatus').css({display:'none'});
        $('#'+id+'area').css({display:'block'});
        $('.tj0').removeClass('tj0');
        $('.xfour0').removeClass('xfour0');
        $('#'+id+'listId').addClass('tj0');
        $('#'+id+'area').children('div').first().children('p').first().addClass('xfour0');
    }
    function areaClieck(obj){
        $('.xfour0').removeClass('xfour0');
        $(obj).addClass('xfour0')
    }
    function saveAdd(){
        $.DialogByZ.Loading(/*[[${uiPath}+${appName}+'/images/loading.png']]*/)

        var marketType=$('.ktws').attr("data");
        $('#marketTypeId').val(marketType);
        var marketList=$('.tj0').attr("data");
        $('#marketListId').val(marketList);
        var marketAreaList=$('.xfour0').attr("data");
        if(marketAreaList==""){
            marketAreaList="0";
        }
        $('#marketAreaListId').val(marketAreaList);
        var a= $('#xiandadress1').val();
        $('#xiandadress1').val($('#xiandadress').val()+","+a);
        $.ajax({
            type:'post',
            url:$('#commentForm').attr('action'),
            data:$('#commentForm').serialize(),
            dataType:'json',
            beforeSend:function() {
                if ($('#xiandadress').val() == '') {
                    alert("请输入详细地址");
                    $.DialogByZ.Close();

                    return false;
                }
                if ($('#sjmingzi').val() == '') {
                    alert("请输入商家名称");
                    $.DialogByZ.Close();

                    return false;
                }
            },

            success:function (result) {
                if(result.code==1){
                    $.DialogByZ.Close();
                    $.DialogByZ.Alert({Title: "提交成功", Content:result.data ,BtnL:"确定",FunL:localhref})
                }else{
                    $.DialogByZ.Close();
                    $.DialogByZ.Alert({Title: "提交失败", Content:result.data  ,BtnL:"确定"})
                }
            }

        })

    }
    function localhref(){
        window.location.href="/materialUser/index"

    }
    var a="";
    $("select#type").change(function(){
        $('#tobaiduCity').val($(this).val());
        $.ajax({
            type:'post',
            url:"/materialShop/getShopList",
            data:{"id":$(this).val()},
            dataType:'json',

            success:function (result) {
                if(result.code==1){
                    $('.xgdiyi').empty();
                    $('#shangcheng').empty();
                    $('#quwei').empty();
/*
 <div id="xgfrdd" class="xiugaidisan" th:each="materialTypeList,listTypeStat: ${materialList}" th:id="${materialTypeList.marketTypeId}+'list'" th:style="${listTypeStat.index==0}?'display:block':'display:none'" >
*/

                    for(var i=0;i<result.data.length;i++){
                        if(i==0){
                            var p = "<p class='xgwos ktws' id="+result.data[i].marketTypeId+'type'+" onclick='typeClieck(" + result.data[i].marketTypeId + ")' data="+result.data[i].marketTypeId+" >"+result.data[i].marketTypeName+"</p>"
                            var div =$("<div class='xiugaidisan' id="+result.data[i].marketTypeId+'list'+" style='display: block' ></div>")
                            var quweiDiv=$("<div style='display: block' id="+result.data[i].marketTypeId+'typearea'+" class='areaxiugaidisan'>")

                            for(var a=0;a<result.data[i].list.length;a++){
                                if(a==0){
                                    var shangchang="<div><p id="+result.data[i].list[a].marketListId+'listId'+" class='tj tj0' onclick='listClieck(" + result.data[i].list[a].marketListId + ")' data="+result.data[i].list[a].marketListId+">"+result.data[i].list[a].marketListName+"</p></div>"
                                    div.append(shangchang)
                                    var area=$("<div class='areastatus' style='display: block' id="+result.data[i].list[a].marketListId+'area'+"></div>")
                                    for(var c=0;c<result.data[i].list[a].areaList.length;c++){
                                        if(c==0){
                                            var areadiv =$("<div></div>")
                                            var parea="<p class='xfour xfour0' id="+result.data[i].list[a].areaList[c].marketAreaId+"  onclick='areaClieck(this)' data="+result.data[i].list[a].areaList[c].marketAreaId+">"+result.data[i].list[a].areaList[c].marketAreaName+" </p>"
                                            areadiv.append(parea);
                                            area.append(areadiv)
                                        }else{
                                            var areadiv =$("<div></div>")
                                            var parea="<p  class='xfour' id="+result.data[i].list[a].areaList[c].marketAreaId+"  onclick='areaClieck(this)' data="+result.data[i].list[a].areaList[c].marketAreaId+">"+result.data[i].list[a].areaList[c].marketAreaName+"</p>"
                                            areadiv.append(parea);
                                            area.append(areadiv)
                                        }

                                    }
                                    quweiDiv.append(area)
                                    $('#quwei').append(quweiDiv)

                                } else{
                                    var shangchang="<div><p id="+result.data[i].list[a].marketListId+'listId'+" class='tj' onclick='listClieck(" + result.data[i].list[a].marketListId + ")' data="+result.data[i].list[a].marketListId+">"+result.data[i].list[a].marketListName+"</p></div>"
                                    div.append(shangchang)
                                    var area=$("<div class='areastatus' style='display: none' id="+result.data[i].list[a].marketListId+'area'+"></div>")
                                    for(var c=0;c<result.data[i].list[a].areaList.length;c++){
                                  var areadiv =$("<div></div>")
                                        var parea="<p class='xfour'id="+result.data[i].list[a].areaList[c].marketAreaId+"  onclick='areaClieck(this)' data="+result.data[i].list[a].areaList[c].marketAreaId+"> "+result.data[i].list[a].areaList[c].marketAreaName+"</p>"
                                   areadiv.append(parea);
                                            area.append(areadiv)


                                    }
                                    quweiDiv.append(area)
                                    $('#quwei').append(quweiDiv)
                                }
                                }



                        }else{
                            var p = "<p class='xgwos' id="+result.data[i].marketTypeId+'type'+" data="+result.data[i].marketTypeId+"  onclick='typeClieck(" + result.data[i].marketTypeId + ")'>"+result.data[i].marketTypeName+"</p>"
                            var div =$("<div class='xiugaidisan' id="+result.data[i].marketTypeId+'list'+" style='display: none' ></div>")
                            var quweiDiv=$("<div style='display: none' id="+result.data[i].marketTypeId+'typearea'+" clas='areaxiugaidisan'>");
                            for(var a=0;a<result.data[i].list.length;a++){
                                if(a==0){
                                    var shangchang="<div><p id="+result.data[i].list[a].marketListId+'listId'+" class='tj tj0' onclick='listClieck(" + result.data[i].list[a].marketListId + ")' data="+result.data[i].list[a].marketListId+">"+result.data[i].list[a].marketListName+"</p></div>"
                                    div.append(shangchang)
                                    var area=$("<div class='areastatus' style='display: none' id="+result.data[i].list[a].marketListId+'area'+"></div>")
                                    for(var c=0;c<result.data[i].list[a].areaList.length;c++){
                                        var areadiv =$("<div></div>")
                                        var parea="<p  class='xfour'id="+result.data[i].list[a].areaList[c].marketAreaId+"  onclick='areaClieck(this)' data="+result.data[i].list[a].areaList[c].marketAreaId+"> "+result.data[i].list[a].areaList[c].marketAreaName+"</p>"
                                        areadiv.append(parea);
                                        area.append(areadiv)


                                    }
                                    quweiDiv.append(area)
                                    $('#quwei').append(quweiDiv)
                                }

                                 else{
                                    var shangchang="<div><p id="+result.data[i].list[a].marketListId+'listId'+" class='tj' onclick='listClieck(" + result.data[i].list[a].marketListId + ")' data="+result.data[i].list[a].marketListId+">"+result.data[i].list[a].marketListName+"</p></div>"
                                    div.append(shangchang)
                                    var area=$("<div class='areastatus' style='display: none' id="+result.data[i].list[a].marketListId+'area'+"></div>")
                                    for(var c=0;c<result.data[i].list[a].areaList.length;c++){
                                        var areadiv =$("<div></div>")
                                        var parea="<p class='xfour' id="+result.data[i].list[a].areaList[c].marketAreaId+"  onclick='areaClieck(this)' data="+result.data[i].list[a].areaList[c].marketAreaId+"> "+result.data[i].list[a].areaList[c].marketAreaName+"</p>"
                                        areadiv.append(parea);
                                        area.append(areadiv)


                                    }
                                    quweiDiv.append(area)
                                    $('#quwei').append(quweiDiv)

                                }

                            }

                        }
                        $('.xgdiyi').append(p);

                        $('#shangcheng').append(div);

                    }
          /*          var b="   <div class=\"xgdiyi\">\n" +
                        "                        <p class=\"xgwos\" th:each=\"materialListType,aStat: ${materialList}\" th:utext=\"${materialListType.marketTypeName}\" th:class=\"${aStat.index==0}?'xgwos ktws':'xgwos'\" th:onclick=\"'typeClieck('+${materialListType.marketTypeId}+')'\" th:id=\"${materialListType.marketTypeId}+'type'\" th:data=\"${materialListType.marketTypeId}\"></p>\n" +
                        "                        </div>"
                    $('.xgfenlei').append(a);*/
                }else{
                    $.DialogByZ.Close();
                    $.DialogByZ.Alert({Title: "提交失败", Content:result.data  ,BtnL:"确定"})
                }
            }

        })
    });
    </script>
</body>
</html>